<template>
	<view class="container">
		<view class="ling-view"></view>
		
		<view v-if="hasData" class="assess-children-view">
			<image class="head" :src="assessDetail.gender===1?'../../static/children-head-male.png':'../../static/children-head-female.png'"></image>
			<view class="children-info-view">
				<view class="children-info-view-row">
					<text style="flex: 1.3;">姓名:{{assessDetail.childrenName}}</text>
					<text style="flex: 1.3;">月龄:{{assessDetail.month}}({{assessDetailCompare.month}})月</text>
					<text class="info-item">性别:{{assessDetail.gender===1?'男':'女'}}</text>
				</view>
				<view class="children-info-view-row">
					<text style="flex: 1.3;">身高:{{assessDetail.height}}({{assessDetailCompare.height}})CM</text>
					<text style="flex: 1.3;">体重:{{assessDetail.weight}}({{assessDetailCompare.weight}})KG</text>
					<text class="info-item"></text>
				</view>
				<view class="children-info-view-row">
					{{formatDate(assessDetail.evaluatingDate)}}({{formatDate(assessDetailCompare.evaluatingDate)}})
				</view>
			</view>
		</view>
		
		<view class="ling-view"></view>
		
		<view v-if="hasData" class="conclusion">
			{{assessDetail.compareDQConclusion}}
		</view>
		
		<view class="ling-view"></view>
		
		<view v-if="hasData" class="container" style="background-color: #FFFFFF;padding-top: 20rpx;padding-bottom: 20rpx;">
			<bmiHeightEChart v-if="hasData" :beginIndex="beginIndex" :endIndex="endIndex" :monthBaseValues="bmiData.monthBaseValuesV2" :lineNames="bmiData.heightLineNamesV2" :lineValues="bmiData.heightLineValuesV2"
			 :actualMonth="actualMonth" :height="actualHeight"></bmiHeightEChart>
			<text class="chart-hint" style="margin-bottom: 20rpx;">{{assessDetail.compareHeightConclusion}}</text>
			
			<view class="ling-view" style="margin-bottom: 20rpx;"></view>

			<bmiWeightEChart v-if="hasData" :beginIndex="beginIndex" :endIndex="endIndex" :monthBaseValues="bmiData.monthBaseValuesV2" :lineNames="bmiData.weightLineNamesV2" :lineValues="bmiData.weightLineValuesV2"
			 :actualMonth="actualMonth" :weight="actualWeight"></bmiWeightEChart>
			 <text class="chart-hint" style="margin-bottom: 20rpx;">{{assessDetail.compareWeightConclusion}}</text>
		</view>

		<view class="ling-view"></view>
		
		<view v-if="hasData" class="assess-scores-compare">
			<text class="assess-title">发育商DQ（本次）:{{dqFraction.toFixed()}}</text>
			<text class="assess-title">发育商DQ（上次）:{{dqFractionCompare.toFixed()}}</text>
			<scoresview :dimensionScores="assessDetail.dimensionScores" :dimensionScoresCompare="assessDetailCompare.dimensionScores"></scoresview>
		</view>
		
		<view class="ling-view"></view>
		
		<assessScoresEchart v-if="hasData"
			:dimensionScores="assessDetail.dimensionScores" :dimensionScoresCompare="assessDetailCompare.dimensionScores"></assessScoresEchart>
			
		<view class="ling-view"></view>
		
		<button  class="assess-result-share" open-type="share">分享</button>
	</view>
</template>

<script>
	import bmiHeightEChart from '../../components/bmi-height-echart.vue'
	import bmiWeightEChart from '../../components/bmi-weight-echart.vue'
	import assessScoresEchart from '../../components/assess-scores-echart.vue'
	import scoresview from '../../components/assess-scores-view.vue'
	import utils from '../../utils/utils.js'

	export default {
		components: {
			bmiHeightEChart,
			bmiWeightEChart,
			assessScoresEchart,
			scoresview,
		},

		data() {
			return {
				hasData: false,
				
				assessDetail: {
					dimensionScores: [],
				},
				assessDetailCompare: {
					dimensionScores: [],
				},
				
				monthBaseValues: [],
				beginIndex: 0,
				endIndex: 0,
				
				actualMonth: [],
				actualHeight: [],
				actualWeight: [],
				dqFraction: 0,
				dqFractionCompare: 0,

				///身高 体重
				bmiData: {},
				theme: getApp().globalData.theme,
			}
		},

		onLoad(option) {
			// evaluateRecordId: '4028808a72e55b900172f5263680010d',
			// comparingWithId: '4028808a72e55b900172f51de4e200d7',
			this.evaluateRecordId = option.evaluateRecordId;
			this.comparingWithId = option.comparingWithId;
			this.getAssessCompare();
		},

		methods: {
			
			formatDate(dateStr){
				console.log(dateStr);
				console.log('formatDate');
				return utils.formatDate(utils.formatISODate(dateStr),'yyyy-MM-dd');
			},

			getAssessCompare() {
				uni.showLoading({});
				this.$http.post('/eapi/manager/compare_with', {}, {
					params: {
						evaluateRecordId: this.evaluateRecordId,
						comparingWithId: this.comparingWithId,
					}
				}).then(res => {
					uni.hideLoading()
					console.log(res);
					if (res.code === '000000') {
						this.handleData(res.data)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},

			handleData(data) {
				this.bmiData = data.bmi;

				var dqTotal = 0.0;
				var size = 0;
				var dqFraction;
				var dqFractionCompare;
				
				for (var index in data.dimensionScores) {
					var item = data.dimensionScores[index];

					item.month = item.month / 10;
					item.dqFraction = item.dq / 10;

					if (item.dimensionName === '交流互动警示行为') {
						item.dimensionNamev2 = "警示\n行为";
					} else if (item.dimensionName === '精细动作') {
						item.dimensionNamev2 = '精细\n动作'
					} else if (item.dimensionName === '适应能力') {
						item.dimensionNamev2 = '适应\n能力'
					} else if (item.dimensionName === '社会行为') {
						item.dimensionNamev2 = '社会\n行为'
					} else if (item.dimensionName === '警示行为') {
						item.dimensionNamev2 = '警示\n行为'
					} else {
						item.dimensionNamev2 = item.dimensionName;
					}
					
					if (item.dimensionName != '交流互动警示行为') {
						dqTotal += item.dqFraction;
						size += 1;
					}
				}
				dqFraction = dqTotal / size;

				dqTotal = 0.0;
				size = 0;
				for (var index in data.compareWith.dimensionScores) {
					var item = data.compareWith.dimensionScores[index];

					item.month = item.month / 10;
					item.dqFraction = item.dq / 10;

					if (item.dimensionName === '交流互动警示行为') {
						item.dimensionNamev2 = "警示\n行为";
					} else if (item.dimensionName === '精细动作') {
						item.dimensionNamev2 = '精细\n动作'
					} else if (item.dimensionName === '适应能力') {
						item.dimensionNamev2 = '适应\n能力'
					} else if (item.dimensionName === '社会行为') {
						item.dimensionNamev2 = '社会\n行为'
					} else if (item.dimensionName === '警示行为') {
						item.dimensionNamev2 = '警示\n行为'
					} else {
						item.dimensionNamev2 = item.dimensionName;
					}
					
					if (item.dimensionName != '交流互动警示行为') {
						dqTotal += item.dqFraction;
						size += 1;
					}
				}
				dqFractionCompare = dqTotal / size;

				var months = [];
				var heights = [];
				var weights = [];
				months.push(data.month);
				months.push(data.compareWith.month);
				heights.push(data.height);
				heights.push(data.compareWith.height);
				weights.push(data.weight);
				weights.push(data.compareWith.weight);

				this.actualMonth = months;
				this.actualHeight = heights;
				this.actualWeight = weights;
				
				var beginIndex = 0;
				var endIndex = 0;
				var monthIndex = 0;
				var monthArray = [1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 18, 21, 24, 30, 36, 42, 48, 54, 60, 66, 72];
				monthArray = this.bmiData.monthBaseValuesV2;
				console.log(monthArray);
				endIndex = monthArray.length - 1;
				this.beginIndex = beginIndex;
				this.endIndex = endIndex;
				
				this.dqFraction = dqFraction;
				this.dqFractionCompare = dqFractionCompare;
				
				this.assessDetail = data;
				this.assessDetailCompare = data.compareWith;
				this.hasData = true;
			},
			
			onShareAppMessage(res) {
			    return {
			      title: this.assessDetail.childrenName+'的测评对比',
			      path: '/pages-assess/assess-compare/assess-compare?evaluateRecordId='+this.evaluateRecordId+'&comparingWithId='+item.comparingWithId
			    }
			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background-color: #F7F7F7;
	}
	
	.conclusion{
		font-size: 24rpx;
		color: #666666;
		padding-left: 40rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		padding-right: 40rpx;
		background-color: #FFFFFF;
	}
	
	.pop-bg {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		align-items: center;
		height: 500rpx;
	}
	
	.assess-children-view {
		background-color: #FFFFFF;
		padding-top: 20rpx;
		padding-left: 40rpx;
		padding-bottom: 20rpx;
		
		display: flex;
		flex-direction: row;
		font-size: 24rpx;
		color: #666666;
		align-items: center;
	}
	
	.head {
		width: 120rpx;
		height: 120rpx;
		margin-right: 40rpx;
		border-color: $app-main-color;
		border-width: 1px;
		border-radius: 50%;
		border-style: solid;
	}
	
	.children-info-view {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
	
	.children-info-view-row {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
	}
	
	.info-item {
		flex: 1;
	}
	
	.assess-scores-compare {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}
	
	.assess-title {
		color: #666666;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.chart-hint{
		color: #333333;
		font-size: 26rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}
	
	.assess-result-share {
		width: 150px;
		height: 50px;
		background: linear-gradient(180deg, rgba(250, 204, 48, 1) 0%, rgba(252, 222, 122, 1) 100%);
		opacity: 1;
		border-radius: 4px;
	
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		align-self: center;
	
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		
		@include app-btn-background();
	}
</style>
